﻿<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LiveConnectExample"
    xmlns:common="using:LiveConnectExample.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    x:Name="PageRoot"
    x:Class="LiveConnectExample.CalendarPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <Page.Resources>
        <x:String x:Key="ChevronGlyph">&#xE26B;</x:String>
        <common:BooleanToVisibilityConverter x:Key="IfTrueThenVisible" TrueValue="Visible"/>
        <common:BooleanToVisibilityConverter x:Key="IfFalseThenVisible" TrueValue="Collapsed"/>
        <common:DateTimeFormatValueConverter x:Key="GeneralDateFormatConverter" FormatString="g"/>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page.
    -->
	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Grid.ChildrenTransitions>
			<TransitionCollection>
				<EntranceThemeTransition/>
			</TransitionCollection>
		</Grid.ChildrenTransitions>

		<Hub>
			<Hub.Header>
				<!-- Back button and page title -->
				<Grid>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="80"/>
						<ColumnDefinition Width="*"/>
					</Grid.ColumnDefinitions>
					<Button x:Name="BackButton" Margin="-1,-1,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
						Style="{StaticResource NavigationBackButtonNormalStyle}"
						VerticalAlignment="Top"
						AutomationProperties.Name="Back"
						AutomationProperties.AutomationId="BackButton"
						AutomationProperties.ItemType="Navigation Button"/>
					<TextBlock x:Name="PageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
						IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
				</Grid>
			</Hub.Header>

			<HubSection Width="320" Margin="0,0,80,0" Header="{Binding Calendar.name}" Visibility="{Binding IsConnected, Converter={StaticResource IfTrueThenVisible}}">
				<HubSection.Background>
					<ImageBrush Stretch="UniformToFill" />
				</HubSection.Background>
				<DataTemplate>
					<Grid>
						<Grid.Resources>
							<Style TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
								<Setter Property="Margin" Value="5"/>
							</Style>
							<Style TargetType="HyperlinkButton" BasedOn="{StaticResource TextBlockButtonStyle}">
								<Setter Property="Margin" Value="5"/>
							</Style>
						</Grid.Resources>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto"/>
							<ColumnDefinition Width="5"/>
							<ColumnDefinition Width="*"/>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="*"/>
						</Grid.RowDefinitions>
                        <Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="99" Source="{Binding ImageSource}" Width="180" Height="180" Margin="0,20,0,20" />
						<TextBlock Grid.Row="1" Grid.Column="0" Text="Id: "/>
						<TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Calendar.id}"/>

						<TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="99" Text="Additional Values:"/>
						<ScrollViewer Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="99" VerticalScrollBarVisibility="Auto" Margin="5">
							<ItemsControl ItemsSource="{Binding AdditionalDetails}">
								<ItemsControl.ItemTemplate>
									<DataTemplate>
										<StackPanel Orientation="Horizontal">
											<TextBlock Text="{Binding Key}"/>
											<TextBlock Text=" - "/>
											<TextBlock Text="{Binding Value}"/>
										</StackPanel>
									</DataTemplate>
								</ItemsControl.ItemTemplate>
							</ItemsControl>
						</ScrollViewer>
					</Grid>
				</DataTemplate>
			</HubSection>

			<HubSection Header="Events" Visibility="{Binding IsConnected, Converter={StaticResource IfTrueThenVisible}}">
				<DataTemplate>
					<GridView x:Name="EventsListing"
						ItemsSource="{Binding DataContext.EventItems, ElementName=PageRoot}"
						AutomationProperties.AutomationId="EventsListing"
						AutomationProperties.Name="Items"
						TabIndex="1"
						SelectionMode="Single"
						SelectedItem="{Binding SelectedEventItem, Mode=TwoWay}"
						SelectionChanged="HandleEventsListingSelectionChanged"
						IsSwipeEnabled="false">
						<GridView.ItemTemplate>
							<DataTemplate>
								<Grid Margin="6">
									<Grid.ColumnDefinitions>
										<ColumnDefinition Width="80"/>
										<ColumnDefinition Width="320"/>
									</Grid.ColumnDefinitions>
									<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="80" Height="80">
										<Image Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Source="ms-appx:///Assets/Calendar.png"/>
									</Border>
									<Grid Grid.Column="1" Margin="10,0,0,0">
										<Grid.Resources>
											<Style TargetType="TextBlock" BasedOn="{StaticResource CaptionTextBlockStyle}">
												<Setter Property="TextWrapping" Value="NoWrap"/>
												<Setter Property="Margin" Value="0,0,5,0"/>
											</Style>
										</Grid.Resources>
										<Grid.RowDefinitions>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
										</Grid.RowDefinitions>
										<Grid.ColumnDefinitions>
											<ColumnDefinition Width="Auto"/>
											<ColumnDefinition Width="*"/>
										</Grid.ColumnDefinitions>
										<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding name}" Style="{StaticResource TitleTextBlockStyle}" MaxHeight="40"/>

										<TextBlock Grid.Row="1" Grid.Column="0" Text="Start:" />
										<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding start_time, Converter={StaticResource GeneralDateFormatConverter}}" />

										<TextBlock Grid.Row="2" Grid.Column="0" Text="End:" />
										<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding end_time, Converter={StaticResource GeneralDateFormatConverter}}"  />

										<TextBlock Grid.Row="3" Grid.Column="0" Text="Location:" />
										<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding location}"  />

										<TextBlock Grid.Row="4" Grid.Column="0" Text="Id:" />
										<TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding id}" />
									</Grid>
								</Grid>
							</DataTemplate>
						</GridView.ItemTemplate>
                        <Interactivity:Interaction.Behaviors>
                            <local:AppBarDisplayOnItemSelectionBehavior DisplayOnSelectionAction="Bottom"/>
                        </Interactivity:Interaction.Behaviors>
                    </GridView>
				</DataTemplate>
			</HubSection>

			<HubSection Visibility="{Binding IsConnected, Converter={StaticResource IfFalseThenVisible}}">
				<DataTemplate>
					<TextBlock>
						<Run Text="To use this example, make sure the current user is signed in..."/>
					</TextBlock>
				</DataTemplate>
			</HubSection>
		</Hub>
	</Grid>

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Refresh" Label="Refresh" Command="{Binding RefreshCommand}"/>
            <AppBarSeparator/>
            <AppBarButton Icon ="Clear" Label="Remove" Command="{Binding RemoveCommand}"/>
            <AppBarButton Icon ="Edit" Label="Edit" Command="{Binding EditCommand}">
                <AppBarButton.Flyout>
                    <Flyout>
                        <Grid Width="320" Margin="20,10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <local:CalendarEventEditControl Grid.Row="0" DataContext="{Binding EventBeingEdited}" />
                            <Grid Grid.Row="1">
                                <Button Content="Save" HorizontalAlignment="Center" Command="{Binding SaveEditedCommand}"/>
                            </Grid>
                        </Grid>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Icon ="Add" Label="Add Event" Command="{Binding AddCommand}">
                <AppBarButton.Flyout>
                    <Flyout>
                        <Grid Width="320" Margin="20,10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <local:CalendarEventEditControl Grid.Row="0" DataContext="{Binding EventBeingAdded}" />
                            <Grid Grid.Row="1">
                                <Button Content="Save" HorizontalAlignment="Center" Command="{Binding SaveAddedCommand}"/>
                            </Grid>
                        </Grid>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>
</Page>
